<template>
    <div class="performance-title">
        <span>更多</span>
    </div>
    <div class="performance-title1">
        <div class="tl1">监督员</div>
        <div class="tl2">履职案件数量</div>
        <div class="tl3">累计培训次数</div>
        <div class="tl4">综合评价</div>
    </div>
    <div class="performance-content">
        <div class="item" v-for="(item,index) in list" :key="index">
            <div class="tl1">{{ item.name }}</div>
            <div class="tl2">{{ item.num }}</div>
            <div class="tl3">{{ item.num1 }}</div>
            <div class="tl4">{{ item.num2 }}</div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
let list = ref([
    {name:'芮世',num:'忠州街道办事处',num1:'98',num2:'98'},
    {name:'穆友媛',num:'忠州街道办事处',num1:'98',num2:'98'},
    {name:'里豪竹',num:'忠州街道办事处',num1:'94',num2:'93'},
    {name:'萨云豪',num:'忠州街道办事处',num1:'92',num2:'92'},
    {name:'崔振家',num:'忠州街道办事处',num1:'88',num2:'88'},
    {name:'浦世梁',num:'忠州街道办事处',num1:'86',num2:'86'},
    {name:'其蓉',num:'忠州街道办事处',num1:'77',num2:'75'},
    {name:'王鹤',num:'忠州街道办事处',num1:'74',num2:'75'},
    {name:'李虎',num:'忠州街道办事处',num1:'64',num2:'66'},
    {name:'秋天',num:'忠州街道办事处',num1:'55',num2:'57'}
])
</script>

<style lang="less" scoped>
.performance-title{
    width: 100%;
    height: 44px;
    margin: 16px 0 12px 0;
    background-image: url("../../../assets/icon21.png");
    background-size: 100% 100%;
    box-sizing: border-box;
    padding-right: 17px;
    span{
        font-family: PingFangSC-Regular;
        font-weight: 400;
        font-size: 14px;
        color: #159AFF;
        float: right;
        line-height: 44px;
        cursor: pointer;
    }
}
.performance-title1{
    width: 100%;
    height: 28px;
    background: rgba(2, 49, 100, .2);
    margin-top: 12px;
    box-sizing: border-box;
    padding: 0 16px 0 12px;
    display: flex;
    align-items: center;
    font-family: PingFangSC-Regular;
    font-weight: 400;
    font-size: 12px;
    color: #159AFF;
    .tl1{
        width: 124px;
    }
    .tl2{
        width: 172px;
    }
    .tl3{
        width: 140px;
    }
    .tl4{
        flex: 1;
    }
}
/* 隐藏滚动条轨道 */
.performance-content::-webkit-scrollbar {
    display: none; /* 对于Chrome和Safari */
}
.performance-content{
    width: 100%;
    height: 245px;
    overflow-y: scroll;
    .item{
        width: 100%;
        height: 32px;
        margin-top: 4px;
        font-family: PingFangSC-SNaNpxibold;
        font-weight: 600;
        font-size: 12px;
        color: #D0DEEE;
        display: flex;
        align-items: center;
        box-sizing: border-box;
        padding: 0 16px 0 12px;
        .tl1{
            width: 124px;
        }
        .tl2{
            width: 172px;
        }
        .tl3{
            width: 140px;
        }
        .tl4{
            flex: 1;
        }
    }
    .item:nth-child(odd){
        background: rgba(71, 138, 138, 0);
        box-shadow: inset 0 -1px 0 0 rgba(108, 128, 151, 0.5);
    }
    .item:nth-child(even){
        background: rgba(71, 107, 138, 0.1);
        box-shadow: inset 0 -1px 0 0 rgba(108, 128, 151, 0.5);
    }
}
</style>